<template>
	<view>
		<view class="wrapper">
			<image class="image-s" :src="img_url + 'login.png'"></image>
			<view class="text-center margin-top-xl">
				<view class="text-black text-bold text-xl" style="margin: 6px;">欢迎使用杭 &nbsp; "@" &nbsp;在线</view>
				<view class="flex">
					<view class="text-gray text-cut text-font">
						登录后可查询、办理各类助残业务
					</view>
				</view>
			</view>
			<view class="padding flex flex-direction">
				<!-- #ifdef MP-WEIXIN -->
				<button class="cu-btn bg-blue margin-tb-sm lg" open-type="getUserInfo" @getuserinfo="user_login">立即登录</button>
				<!-- #endif -->

				<!-- #ifdef APP-PLUS -->
				<button class="cu-btn bg-blue margin-tb-sm lg" @click="user_login">立即登录</button>
				<!-- #endif -->

				<!-- #ifdef H5 -->
				<view class="cu-form-group">
					<input placeholder="用户账号" name="input" type="idcard"></input>
				</view>
				<view class="cu-form-group">
					<input placeholder="用户密码" name="input" type="password"></input>
				</view>
				<button class="cu-btn bg-blue margin-tb-sm lg" @click="user_login">立即登录</button>
				<view class="register-section">
					<text @click="toRegist" style="float: left;">忘记密码</text>
					<text @click="toRegist" style="float: right;">马上注册</text>
				</view>
				<!-- #endif -->
			</view>
			<!-- <official-account @load="bindload" @error="binderror"></official-account> -->
		</view>
	</view>
	<!-- 微信登录授权页 -->
</template>

<script>
	import { mapMutations } from 'vuex';

	export default {
		data() {
			return {
				users: {state:'0'},
				session: {code: null, skey: null },
				img_url: this.$utils.SYS_URL + this.$utils.IMG_URL
			}
		},
		onShow() {
			this.code_login();
		},
		methods: {
			...mapMutations(['login']),
			//1. 页面获取登录CODE的信息
			code_login(){
				uni.login({
					provider: 'weixin',
					success: (code_res => {
						this.session.code = code_res.code;
						this.session.skey = code_res.session_key;
					})
				});
			},
			
			//2. 页面获取用户信息并登录
			user_login(it) {
				// #ifdef MP-WEIXIN || MP-QQ
				// 通过前台获取微信用户信息
				uni.showLoading({title:"加载中"});
				this.users.nickName = it.detail.userInfo.nickName;
				this.users.avatar = it.detail.userInfo.avatarUrl;
				this.users.openTy = 'MP-WEIXIN';
				
				var authData = {"js_code": this.session.code, "encrypt_data": it.detail.encryptedData, "iv": it.detail.iv};
				this.sure_login('MP-WEIXIN', JSON.stringify(authData));
				// ./通过前台获取微信用户信息
				// #endif

				// #ifdef APP-PLUS || H5

				// #endif
			},
			
			//3. 后台获取用户信息并登录
			sure_login(authType, authData) {
				let _this = this;
				var params = {"authType": authType, "authData": authData };
				this.$request.postForm('/view/users/login', params).then(
					res => {
						_this.users.state = res.data.users.state;
						_this.users.citizenName = res.data.users.citizenName;
						_this.users.uid = res.data.users.uid;
						_this.users.citizenId = res.data.users.citizenId;
						_this.users.stateId = res.data.users.stateId;
						_this.users.phone = res.data.users.phone;
						_this.users.citizenType = res.data.users.citizenType;
						
						_this.users.openId = JSON.parse(res.data.users.json).openId;
						_this.users.unionId = JSON.parse(res.data.users.json).unionId;
						
						_this.$store.commit('login', _this.users);
						uni.setStorageSync('token', res.data.token);
						uni.hideLoading();
						//成功登录后跳转首页
						uni.switchTab({
							url: '/pages/admin/vhome',
							success: (res) => {
								let page = getCurrentPages().pop(); //当前页面
								if (page == undefined || page == null) return; 
								page.onLoad();
							 }
						});
						// uni.navigateBack()
					},
					err => {
						console.log(err);
					}
				);
			},
			bindload(detail) {
				console.log(detail)
			},
			binderror(detail) {
				console.log(detail)
			}
		},
	}
</script>

<style lang='scss'>
	page {
		background: #fff;
	}

	.text-f {
		font-size: 48upx;
		font-weight: 550;
		margin-left: 24upx;
	}

	.text-m {
		margin-top: 100upx;
	}

	.text-font {
		font-size: 17px;
		margin-left: 84px;
	}

	.wrapper {
		position: relative;
		z-index: 90;
		background: #fff;
		padding-bottom: 40upx;
	}

	.image-s {
		height: 554rpx;
		width: 100%;
	}

	.image-a {
		height: 100px;
		width: 120px;
		margin-left: 130px;
		margin-top: 79px;
	}

	.back-btn {
		position: absolute;
		left: 40upx;
		z-index: 9999;
		padding-top: var(--status-bar-height);
		top: 40upx;
		font-size: 40upx;
		color: $font-color-dark;
	}
</style>
